<!--
    @license
    Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
    This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
    The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
    The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
    Code distributed by Google as part of the polymer project is also
    subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="/0.5/components/polymer/polymer.html">
<link rel="import" href="/0.5/components/core-menu/core-menu.html">
<link rel="import" href="/0.5/components/core-menu/core-submenu.html">
<link rel="import" href="/0.5/components/core-item/core-item.html">

<core-iconset-svg id="editor" iconSize="24">
<svg><defs>
<g id="format-paint"><path d="M18 4V3c0-.55-.45-1-1-1H5c-.55 0-1 .45-1 1v4c0 .55.45 1 1 1h12c.55 0 1-.45 1-1V6h1v4H9v11c0 .55.45 1 1 1h2c.55 0 1-.45 1-1v-9h8V4h-3z"/></g>
</defs></svg>
</core-iconset-svg>


<polymer-element name="docs-menu" attributes="ajaxify coreElements paperElements versionPrefix" relative>
<template>
  <link rel="stylesheet" href="../../css/elements/docs-menu.css">
  <core-menu id="mainmenu" on-click="{{onClick}}" selectedItem="{{item}}" fit>

    <core-submenu label="About this release" icon="info" class="guide">
      <core-item label="Introducing Polymer 1.0"><a href="/{{versionPrefix}}/docs/"></a></core-item>
      <core-item label="Browser compatibility"><a href="/{{versionPrefix}}/resources/compatibility.html"></a></core-item>
      <core-item label="Release notes"><a href="/{{versionPrefix}}/docs/release-notes.html"></a></core-item>
      <core-item label="Migration guide"><a href="/{{versionPrefix}}/docs/migration.html"></a></core-item>
    </core-submenu>

    <core-submenu label="Get started" icon="social:school" class="guide">
      <core-item label="What is Polymer?"><a href="/{{versionPrefix}}/docs/start/what-is-polymer.html"></a></core-item>
      <core-item label="Quick tour of Polymer"><a href="/{{versionPrefix}}/docs/start/quick-tour.html"></a></core-item>
      <core-item label="Get the Polymer library"><a href="/{{versionPrefix}}/docs/start/getting-the-code.html"></a></core-item>
      <core-submenu label="Get elements" icon="arrow-drop-down" class="guide">
        <core-item label="Browse Element Catalog">
          <a href="http://elements.polymer-project.org/" target="_blank"></a>
          <core-icon class="outlink" icon="open-in-new"></core-icon>
        </core-item>
        <core-item label="Using elements">
          <a href="https://elements.polymer-project.org/guides/using-elements" target="_blank"></a>
          <core-icon class="outlink" icon="open-in-new"></core-icon>
        </core-item>
      </core-submenu>
      <core-submenu label="Build your first element" icon="arrow-drop-down" class="guide">
        <core-item label="1. Get set up">
          <a href="/{{versionPrefix}}/docs/start/first-element/intro.html"></a>
        </core-item>
        <core-item label="2. Add local DOM">
          <a href="/{{versionPrefix}}/docs/start/first-element/step-2.html"></a>
        </core-item>
        <core-item label="3. Data binding & properties">
          <a href="/{{versionPrefix}}/docs/start/first-element/step-3.html"></a>
        </core-item>
        <core-item label="4. React to input">
          <a href="/{{versionPrefix}}/docs/start/first-element/step-4.html"></a>
        </core-item>
        <core-item label="5. Theming with custom properties">
          <a href="/{{versionPrefix}}/docs/start/first-element/step-5.html"></a>
        </core-item>
      </core-submenu>
      <core-submenu label="Build an app" icon="arrow-drop-down" class="guide">
        <core-item label="Set up">
          <a href="/{{versionPrefix}}/docs/start/psk/set-up.html"></a>
        </core-item>
        <core-item label="Create a page">
          <a href="/{{versionPrefix}}/docs/start/psk/create-a-page.html"></a>
        </core-item>
        <core-item label="Deploy">
          <a href="/{{versionPrefix}}/docs/start/psk/deploy.html"></a>
        </core-item>
      </core-submenu>
      <core-item label="Create a reusable element"><a href="/{{versionPrefix}}/docs/start/reusableelements.html"></a></core-item>
    </core-submenu>

    <core-submenu label="Developer guide" icon="description" class="guide">
      <core-item label="Feature overview"><a href="/{{versionPrefix}}/docs/devguide/feature-overview.html"></a></core-item>
      <core-item label="Registration and lifecycle"><a href="/{{versionPrefix}}/docs/devguide/registering-elements.html"></a></core-item>
      <core-item label="Declared properties"><a href="/{{versionPrefix}}/docs/devguide/properties.html"></a></core-item>
      <core-item label="Local DOM"><a href="/{{versionPrefix}}/docs/devguide/local-dom.html"></a></core-item>
      <core-item label="Styling"><a href="/{{versionPrefix}}/docs/devguide/styling.html"></a></core-item>
      <core-item label="Events"><a href="/{{versionPrefix}}/docs/devguide/events.html"></a></core-item>
      <core-submenu label="Data binding" icon="arrow-drop-down" class="guide">
        <core-item label="Syntax"><a href="/{{versionPrefix}}/docs/devguide/data-binding.html"></a></core-item>
        <core-item label="Helper elements"><a href="/{{versionPrefix}}/docs/devguide/templates.html"></a></core-item>
      </core-submenu>
      <core-item label="Behaviors"><a href="/{{versionPrefix}}/docs/devguide/behaviors.html"></a></core-item>
      <core-item label="Utility functions"><a href="/{{versionPrefix}}/docs/devguide/utility-functions.html"></a></core-item>
      <core-item label="Global settings"><a href="/{{versionPrefix}}/docs/devguide/settings.html"></a></core-item>
      <core-item label="Experimental features" icon="warning"><a href="/{{versionPrefix}}/docs/devguide/experimental.html"></a></core-item>
    </core-submenu>

    <core-item label="API Reference" icon="subject">
      <a href="/{{versionPrefix}}/api/" target="_blank"></a>
      <core-icon class="outlink" icon="open-in-new"></core-icon>
    </core-item>

    <core-submenu label="Tools" icon="editor:format-paint">
      <core-item label="Overview">
        <a href="/{{versionPrefix}}/tools/overview.html"></a>
      </core-item>
      <core-item label="Document your elements">
        <a href="/{{versionPrefix}}/tools/documentation.html"></a>
      </core-item>
      <core-item label="Test your elements">
        <a href="/{{versionPrefix}}/tools/tests.html"></a>
      </core-item>
      <core-item label="Optimize for production">
        <a href="/{{versionPrefix}}/tools/optimize-for-production.html"></a>
      </core-item>
    </core-submenu>

    <core-item label="Articles" icon="book">
      <a href="/{{versionPrefix}}/articles/"></a>
    </core-item>

    <core-item label="Browse Element Catalog" icon="polymer">
      <a href="http://elements.polymer-project.org/" target="_blank"></a>
      <core-icon class="outlink" icon="open-in-new"></core-icon>
    </core-item>

  </core-menu>
</template>
<script>
  Polymer({
    ajaxify: false,
    isReady: false,
    coreElements: {},
    paperElements: {},
    versionPrefix: '',
    created: function() {
      this.coreElementsList = [];
      this.paperElementsList = [];
    },
    domReady: function() {
      this.isReady = true;
      this.highlightItemWithCurrentURL();
    },
    coreElementsChanged: function() {
      for (var name in this.coreElements) {
        this.coreElementsList.push({name: name, url: this.coreElements[name]});
      }
    },
    paperElementsChanged: function() {
      for (var name in this.paperElements) {
        this.paperElementsList.push({name: name, url: this.paperElements[name]});
      }
    },
    highlightItemWithCurrentURL: function(opt_href) {
      var href = opt_href || location.pathname + location.hash;

      if (href.match(/\/articles\//)) {
        this.$.mainmenu.selected = this.$.mainmenu.items.indexOf(this.$.articles);
        return;
      } else if (href.match(/core-elements.html$/)) {
        this.$.mainmenu.selected = this.$.mainmenu.items.indexOf(this.$.coreelements);
        return;
      } else if (href.match(/paper-elements.html$/)) {
        this.$.mainmenu.selected = this.$.mainmenu.items.indexOf(this.$.paperelements);
        return;
      }

      // If href wasn't found, look for a corresponding data-href. This is hacky
      // but the first querySelector will fail because the elements' urls are
      // /<versionPrefix>/docs/elements/core-elements.html#{{name}}.
      var item = this.shadowRoot.querySelector('[href$="' + href + '"]');
      if (!item) {
        item = this.shadowRoot.querySelector('[data-href$="' + href + '"]');
      }

      if (item) {
        var submenu = item.parentElement;

        // Selected item is not a submenu. Keep it selected and quit early.
        if (submenu == this.$.mainmenu) {
          return;
        }

        if (submenu.parentElement && submenu.parentElement.localName == 'core-submenu') {
          do {
            submenu.parentElement.selected = submenu.parentElement.items.indexOf(submenu);
            submenu = submenu.parentElement;
          } while (submenu && submenu.localName == 'core-submenu');
        } else {
          this.$.mainmenu.selected = this.$.mainmenu.items.indexOf(submenu);
        }
      }
    }
  });
</script>
</polymer-element>
